<template>
    <div class="container">
        <el-page-header @back="goBack" content="小哥车辆管理"></el-page-header>
        <el-form label-width="auto" class="e-m-t-45" v-if="cardata">
            <div class="flex">
                <div class="e-flex-1 e-p-r-30">
                    <el-form-item label="车辆类型">
                        <el-radio-group v-model="cardata.type.name" >
							<el-radio :label="item.name" v-for="item in cartype" :key="item.id">{{ item.name }}</el-radio>
						</el-radio-group>
                    </el-form-item>
                </div>
                <div class="e-flex-1 e-p-r-30">
                    <el-form-item label="车牌号">
                        <el-input v-model="cardata.licenseplate" placeholder="车牌号">
                        </el-input>
                    </el-form-item>
                </div>
                <div class="e-flex-1 e-p-r-30">
                    <el-form-item label="载重量（KG）">
                        <el-input type="number" v-model="cardata.load" placeholder="载重量（KG）">
                        </el-input>
                    </el-form-item>
                </div>
            </div>

            <div class="flex">
                <div class="e-flex-1 e-p-r-30">
                    <el-form-item label="设置保险提醒时间">
						<el-date-picker
                            style="width: 100%;"
							v-model="cardata.insurancedate"
							type="datetime"
							placeholder="选择日期时间">
						</el-date-picker>
					</el-form-item>
                </div>
                <div class="e-flex-1 e-p-r-30">
                    <el-form-item label="设置年检提醒日期">
						<el-date-picker
                            style="width: 100%;"
							v-model="cardata.inspectiondate"
							type="datetime"
							placeholder="选择日期时间">
						</el-date-picker>
					</el-form-item>
                </div>
            </div>

            <div class="flex">
                <div class="e-flex-1 e-p-r-30">
                    <el-form-item label="到期短信提醒号码">
						<el-input v-model="cardata.telphones" placeholder="请输入手机号，多个手机号用英文逗号(,)分割"></el-input>
					</el-form-item>
                </div>
                <!-- <div class="e-flex-1 e-p-r-30">
                    <el-form-item label="提醒模式">
						<el-checkbox-group v-model="cardata.remindtime">
							<el-checkbox label="30" name="remindtime">提前30天提醒</el-checkbox>
							<el-checkbox label="15" name="remindtime">提前15天提醒</el-checkbox>
							<el-checkbox label="7" name="remindtime">提前7天提醒</el-checkbox>
							<el-checkbox label="0" name="remindtime">当天提醒</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
                </div> -->
            </div>
        </el-form>
        <div class="e-m-t-45">
            <el-form :inline="true" :model="formInline" label-width="200px" class="demo-form-inline">
                <el-form-item label="上传行驶证正页" prop="drivinglicensefront">
                    <cropper-upload :zoomScale='[1, 1]' :isCropper="false" @getUpload="carfont" class="avatar-uploader">
                        <img v-if="cardata.drivinglicensefront" :src="fileURL + cardata.drivinglicensefront"
                            class="avatar">
                        <div class="avatar-uploader-icon" v-else>
                            <div><i class="el-icon-plus"></i></div>
                            <div class="e-font-14">上传图片</div>
                        </div>
                    </cropper-upload>
                    <div class="tips">建议上传尺寸比例为200*200 </div>
                </el-form-item>
                <el-form-item label="上传行驶证副页" prop="drivinglicenseback">
                    <cropper-upload :zoomScale='[1, 1]' :isCropper="false" @getUpload="carback" class="avatar-uploader">
                        <img v-if="cardata.drivinglicenseback" :src="fileURL + cardata.drivinglicenseback"
                            class="avatar">
                        <div class="avatar-uploader-icon" v-else>
                            <div><i class="el-icon-plus"></i></div>
                            <div class="e-font-14">上传图片</div>
                        </div>
                    </cropper-upload>
                    <div class="tips">建议上传尺寸比例为200*200 </div>
                </el-form-item>
                <el-form-item label="车辆照片" prop="vehiclepic">
                    <cropper-upload :zoomScale='[1, 1]' :isCropper="false" @getUpload="pic" class="avatar-uploader">
                        <img v-if="cardata.vehiclepic" :src="fileURL + cardata.vehiclepic" class="avatar">
                        <div class="avatar-uploader-icon" v-else>
                            <div><i class="el-icon-plus"></i></div>
                            <div class="e-font-14">上传图片</div>
                        </div>
                    </cropper-upload>
                    <div class="tips">建议上传尺寸比例为200*200 </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="e-m-t-45">
            <el-button type="primary" @click="editData(id)">修改</el-button>
            <el-button @click="goBack">返回</el-button>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    layout: 'admin',
    head() {
        return {
            title: '车辆详情修改' 
        }
    },
    props: {},
    data() {
        return {
            page: 1,
			pageSize: 10,
			total: 0,
            value1: '',
            starttime: "",
            endtime: "",
            cardata: {
                insurancedate: null,
				inspectiondate: null,
				telphones: '',
				// remindtime: [],
                type:{
                    name:''
                },
                vehiclehistory:{
                    rows:''
                }
            },
            id: '',
            startdate: "",//下单初始
            enddate: "",//下单结束
            formInline: {
                user: '',
                region: ''
            },
            cartype: [],//车辆类型数据
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        this.getdata(this.$route.query.id)
        this.getListcartype()
    },
    methods: {
        getdata(id) {
            this.$axios.get(`/Operator/Vehicle/Details?id=`+id).then((res) => {
                this.cardata = res
                // this.total =  this.cardata.vehiclehistory.total
            })
        },
        editData(id){
            this.$axios.post(`/Operator/Vehicle/Edit`,{
                "id":id,
                "typeId": this.cartype.find((item)=>item.name == this.cardata.type.name).id,
                "licensePlate": this.cardata.licenseplate,
                "load": this.cardata.load,
                "drivingLicenseFront": this.cardata.drivinglicensefront,
                "drivingLicenseBack": this.cardata.drivinglicenseback,
                "vehiclePic": this.cardata.vehiclepic,
                "insurancedate": this.cardata.insurancedate,
				"inspectiondate": this.cardata.inspectiondate,
				"telphones": this.cardata.telphones,
				"remindtime": this.cardata.remindtime,
            }).then((res) => {
                this.$message.success(res.msg);
                this.getdata(id)
            })
        },
        goBack() {
            this.$router.go(-1)
        },
        time(e) {
            console.log(e)
            this.starttime = e[0]
            this.endtime = e[1]
            // this.timeType = 4
        },
        carfont(res, file) {
			console.log(res, file)
			if (file.status === "success") {
				// this.loading = false
				this.cardata.drivinglicensefront = res.path
				this.$forceUpdate()
			}
		},
		carback(res, file) {
			console.log(res, file)
			if (file.status === "success") {
				// this.loading = false
				this.cardata.drivinglicenseback = res.path
				this.$forceUpdate()
			}
		},
		pic(res, file) {
			console.log(res, file)
			if (file.status === "success") {
				// this.loading = false
				this.cardata.vehiclepic = res.path
				this.$forceUpdate()
			}
		},
        getListcartype() {
			this.$axios.post('/Operator/VehicleType/List', {
				"PageIndex": 1,
				"PageSize": 999,
				// "Key": this.key
			}).then((res) => {
				this.cartype = res.rows;
				// this.total = res.total;
			})
		}
    }
};
</script>
<style lang="scss" scoped></style>